<template>
  <div class="tabbar-config">
    <h4>样式配置</h4>
    <el-form label-width="80px" v-if="config && config.style">
      <el-form-item label="默认颜色">
        <el-color-picker v-model="config.style.defaultColor" />
        <el-button type="text" @click="resetColor('defaultColor')" style="margin-left: 10px;">重置</el-button>
      </el-form-item>
      <el-form-item label="选中颜色">
        <el-color-picker v-model="config.style.selectedColor" />
        <el-button type="text" @click="resetColor('selectedColor')" style="margin-left: 10px;">重置</el-button>
      </el-form-item>
    </el-form>

    <h4>导航项配置</h4>
    <p class="tip">至少添加2个，最多添加5个导航，拖拽进行排序</p>
    <draggable v-if="config && config.items" v-model="config.items" handle=".drag-handle" animation="150">
      <div v-for="(item, index) in config.items" :key="index" class="config-item">
        <i class="el-icon-rank drag-handle" title="拖拽排序"></i>
        <p>导航 {{ index + 1 }}</p>
        <el-form label-position="top">
          <el-form-item label="名称"><el-input v-model="item.name" placeholder="请输入名称" /></el-form-item>
          <el-form-item label="链接"><el-input v-model="item.link" placeholder="请输入小程序页面路径" /></el-form-item>
          <el-form-item label="未选图标"><image-upload v-model="item.unselectedIcon" /></el-form-item>
          <el-form-item label="已选图标"><image-upload v-model="item.selectedIcon" /></el-form-item>
        </el-form>
        <el-button type="danger" size="mini" @click="removeItem(index)" class="delete-btn" icon="el-icon-delete"
          circle></el-button>
      </div>
    </draggable>
    <el-button
            @click="addItem"
            icon="el-icon-plus"
            class="add-item-btn"
            v-if="!config || !config.items || config.items.length < 5"
          >
            添加导航项
          </el-button>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';
  import ImageUpload from '@/components/ImageUpload';

  const DEFAULT_STYLE = {
    defaultColor: '#999999',
    selectedColor: '#409EFF'
  };

  export default {
    name: "TabBarConfig",
    components: {
      draggable,
      ImageUpload
    },
    props: {
      value: { // for v-model
        type: Object,
        default: () => ({})
      }
    },
    computed: {
      config: {
        get() {
          const configValue = this.value || {};
          if (!configValue.style) this.$set(configValue, 'style', {
            ...DEFAULT_STYLE
          });
          if (!configValue.items) this.$set(configValue, 'items', []);
          return configValue;
        },
        set(newValue) {
          this.$emit('input', newValue);
        }
      }
    },
    methods: {
      addItem() {
        if (this.config.items.length >= 5) {
          this.$modal.msgWarning("最多只能添加5个导航项");
          return;
        }
        this.config.items.push({
          name: '新导航',
          link: '',
          unselectedIcon: '',
          selectedIcon: ''
        });
      },
      removeItem(index) {
        this.config.items.splice(index, 1);
      },
      resetColor(key) {
        this.config.style[key] = DEFAULT_STYLE[key];
      }
    }
  }
</script>

<style scoped>
  .config-item {
    position: relative;
    border: 1px dashed #d9d9d9;
    padding: 15px;
    padding-top: 40px;
    margin-bottom: 10px;
    border-radius: 4px;
  }

  .drag-handle {
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: move;
    font-size: 20px;
    color: #999;
  }

  .delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
  }

  .tip {
    color: #999;
    font-size: 12px;
    margin-top: 0;
  }
  .add-item-btn {
    width: 100%;
    border: 1px dashed #dcdfe6;
    color: #909399;
    margin-top: 10px;
  }
  .add-item-btn:hover {
    border-color: #409EFF;
    color: #409EFF;
    background-color: #ecf5ff;
  }

  h4,
  p {
    margin: 0 0 15px 0;
  }
</style>
